<template>
  <div id="page">
    <div class="left-page">
      <nav aria-label="Page navigation">
        <ul class="pagination">
          <li @click="prePage">
            <span aria-label="Previous">
              <span aria-hidden="true">&laquo;</span>
            </span>
          </li>
          <li @click="clickPage(page)" v-for="page in randList" :class="{active: thisPage === page}">
            <span v-text="page"></span>
          </li>
          <li @click="nextPage">
            <span aria-label="Next">
              <span aria-hidden="true">&raquo;</span>
            </span>
          </li>
        </ul>
      </nav>
    </div>
    <div class="right-go">
      <el-input v-model="searchPage" class="el-input" placeholder="请输入页码">
        <template slot="prepend">{{ leftShowInfo }}</template>
        <el-button @click="goPage" slot="append">go</el-button>
      </el-input>
    </div>
  </div>
</template>
<script>
  export default{
    props: {
      count: {
        type: Number,
        default: 0
      },
      thisPage: {
        type: Number,
        default: 1
      },
      pageNumber: {
        type: Number,
        default: 20
      }
    },
    data () {
      return {
        searchPage: ''
      }
    },
    computed: {
      leftShowInfo () {
        return '共 ' + this.count + ' 条 ' + this.allPage + ' 页'
      },
      allPage () {
        return Math.ceil(this.count / this.pageNumber)
      },
      randList () {
        let first = 1
        let last = this.allPage
        if (this.thisPage > 4) {
          first = this.thisPage - 4
        }
        if (this.thisPage < (this.allPage - 4)) {
          last = this.thisPage + 4
        }
        let list = []
        for (let i = first; i <= last; i++) {
          list.push(i)
        }
        return list
      }
    },
    methods: {
      clickPage: function (page) {
        if (this.thisPage !== page) {
          this.$emit('clickPage', page)
        }
      },
      prePage: function () {
        if (this.thisPage > 1) {
          this.$emit('clickPage', this.thisPage - 1)
        }
      },
      nextPage: function () {
        if (this.thisPage < this.allPage) {
          this.$emit('clickPage', this.thisPage + 1)
        }
      },
      goPage: function () {
        if (this.searchPage && this.searchPage > 0 && this.searchPage <= this.allPage) {
          this.$emit('clickPage', parseInt(this.searchPage))
        }
        this.searchPage = ''
      }
    }
  }
</script>
<style scoped>
    #page > div{
        display: inline-block;
        vertical-align: middle;
    }
    .el-input{
      width: 21em;
    }
    nav, nav > ul{
      display: table-cell;
    }
</style>
